<template>
	<view class="container">
		<skeletons :loading="bannerFun.loading" :rowsHeight="['422rpx']">
			<view class="dots" v-if="bannerFun.list.length!=0">
				<swiper class="home-swiper-box" circular :indicator-dots="false" :autoplay="true" :interval="3000"
					:duration="500" @change="bannerFun.change">
					<swiper-item v-for="(item,index) in bannerFun.list" :key="`list-${index}`">
						<image @click="bannerFun.toPages(item)" class="item-img-box" :src="item.pic" mode=""></image>
					</swiper-item>
				</swiper>
				<view class="dots-content">
					<view :class="['dots-item',bannerFun.current == index?'dots-item-active':'']"
						v-for="(item,index) in bannerFun.list" :key="`lists-${index}`"></view>
				</view>
				<view class="dots_share">
					<view class="dots_share_box">
						<image @click="shareApp" :src="iconUrl + '88.png'" mode=""></image>分享
						<!-- #ifdef MP-WEIXIN -->
						<button class="share" open-type="share">分享</button>
						<!-- #endif -->
					</view>

				</view>
			</view>

		</skeletons>
		<view class="historical_records" v-if="recentLearning.list.length > 0">
			<view class="historical_records_title">
				<view class="historical_records_title_text">最近学习</view>
				<view class="historical_records_title_btn" @tap="goStudyRecord">查看全部<uni-icons type="right"
						color="#7C807F" :size="16"></uni-icons></view>
			</view>
			<view class="historical_records_list">
				<view class="historical_records_course" v-for="(histItem,histIndex) in recentLearning.list"
					:key="histIndex" @tap="goCourseDetails(histItem.courseId)">
					<view class="historical_records_course_img">
						<image :src="histItem.courseCover" mode=""></image>
						<view class="historical_records_study_progress">
							<view class="">{{histItem.chapterName}}</view>
							<image :src="histItem.chapterWay == 1 ? `${iconUrl}150.png` :`${iconUrl}149.png`" mode="">
							</image>
						</view>
					</view>
					<view class="historical_records_course_name">{{histItem.courseName}}</view>
					<view class="historical_records_study_time">{{histItem.createTime}}</view>
				</view>
			</view>
		</view>
		<view class="course_classification">
			<view class="course_tabs">
				<scroll-view :scroll-left="0" scroll-x="true" :show-scrollbar="false" class="header_sub_nav_scroll">
					<view class="course_tabs_item_box">
						<template v-for="(courseTabItem,courseTabIndex) in courseClassList.list" :key="courseTabIndex">
							<view class="course_tabs_item"
								v-if="courseTabItem.courseList && courseTabItem.courseList.length>0"
								@tap="courseClassList.courseTab(courseTabIndex)">
								<view class="course_tabs_item_name"
									:class="courseTabIndex == courseClassList.indexAct ? 'course_tabs_item_name_act' : ''">
									{{courseTabItem.name}}
								</view>
								<view class="course_tabs_item_tips" v-if="courseTabIndex == courseClassList.indexAct">
								</view>
							</view>
						</template>

					</view>
				</scroll-view>
			</view>
			<view class="course_content">
				<!-- courseClassList.list[courseClassList.indexAct].courseList -->
				<view class="course_content_list"
					v-for="(courseListItem,courseListIndex) in courseClassList.list[courseClassList.indexAct].courseList"
					:key="courseListIndex" @tap="goCourseDetails(courseListItem.id)">
					<view class="course_content_img">
						<image :src="courseListItem.courseCover" mode=""></image>
						<view class="course_content_tips" v-if="courseListItem.examFlag">考试</view>
					</view>
					<view class="course_content_text">
						<view class="course_content_text_name">{{courseListItem.courseName}}
						</view>
						<view class="course_content_text_tips">{{courseListItem.courseBrief}}</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, onMounted } from 'vue';
	import api from '@/api'
	import configs from '@/config';
	import { onLoad, onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
	import { useUserStoreToRefs } from '@/store/useUserStore'

	const { userInfo } = useUserStoreToRefs()
	onLoad(async () => {

	})
	onShow(() => {
		bannerFun.getBanner()
		courseClassList.getCourseClassList()
		if (userInfo.value) {
			recentLearning.getRecord()
		}

	})
	const iconUrl = ref("https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-")
	//分享
	onShareAppMessage(() => {
		let courseBrief = ''

		let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ''}&text=wx&type=11`;
		return {
			title: '灰耳朵商学院',
			path: `/pages/shareRefereeId/index?q=${encodeURIComponent(cans)}`,
			imageUrl: bannerFun.list[0].pic
		};
	});
	const shareApp = async () => {
		let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ''}&text=wx&type=11`;
		const res : any = await api({
			method: 'POST',
			url: `/mall/user/v2/generateWxUrlLink`,
			data: {
				path: '/pages/shareRefereeId/index',
				query: `q=${encodeURIComponent(cans)}`,
				envVersion: configs.envVersion
			}
		});
		uni.shareWithSystem({
			summary: '',
			href: res.data,
			success() {
				// 分享完成，请注意此时不一定是成功分享
			},
			fail() {
				// 分享失败
			}
		});
	};
	//轮播图
	const bannerFun = reactive({
		list: [],
		loading: true,
		current: 0,
		change: (event) => {
			bannerFun.current = event.detail.current
		},
		getBanner: async () => {
			const res : any = await api({
				method: 'get',
				prefix: 'acc',
				url: `/app_common_contents/v2/list`
			})
			bannerFun.list = res.data.businessDisplayPics || []
			bannerFun.loading = false
		},
		toPages: async (item) => {
			if (item.taptype == 'exam') {
				uni.navigateTo({
					url: `/pages/businessSchool/examIntroduce/examIntroduce?examId=${item.tapto}`
				})
			}
			if (item.taptype == 'course') {
				uni.navigateTo({
					url: `/pages/businessSchool/courseDetails/courseDetails?courseId=${item.tapto}`
				})
			}
		}
	})
	//最近学习
	const recentLearning = reactive({
		list: [],
		getRecord: async () => {
			const res : any = await api({
				method: 'get',
				url: `/mall/course/course-user-record/getRecentStudy`,
				data: {
					page: 1,
					limit: 2,
				}
			})
			if (res.data) {
				recentLearning.list = res.data.records
				console.log(recentLearning.list, 'recentLearning.list')
			}
		},

	})
	//课程分类
	const courseClassList = reactive({
		list: [],
		indexAct: 0,
		getCourseClassList: async () => {
			const res : any = await api({
				method: 'get',
				url: `/mall/course/course-class/getCourseClassList`
			})
			if (res.data) {
				console.log(res.data, 'res.data')
				courseClassList.list = res.data
				console.log(courseClassList.list, 'courseClassList.list')
			}
			/*  */
		},
		courseTab: async (index) => {
			courseClassList.indexAct = index
		}

	})
	const goStudyRecord = () => {
		uni.navigateTo({
			url: '/pages/businessSchool/studyRecord/studyRecord'
		})
	}
	const goCourseDetails = (courseId) => {
		uni.navigateTo({
			url: `/pages/businessSchool/courseDetails/courseDetails?courseId=${courseId}`
		})
	}
	const onDataInit = () => {
		bannerFun.getBanner()
		courseClassList.getCourseClassList()
		recentLearning.getRecord()

	}
	defineExpose({ onDataInit })
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		background-color: #FFFFFF;
		padding-bottom: 188rpx;
		min-height: 100vh;
	}

	.dots {
		position: relative;

		.dots-content {
			position: absolute;
			left: 0;
			bottom: 32rpx;
			width: 100%;
			text-align: center;

			.dots-item-active {
				width: 32rpx !important;
				height: 8rpx !important;
				background: #FFFFFF !important;
				border-radius: 200rpx 200rpx 200rpx 200rpx !important;
			}

			.dots-item {
				display: inline-block;
				margin: 0 8rpx;
				width: 8rpx;
				height: 8rpx;
				background: #CCCCCC;
				border-radius: 50%;
				transition: all 0.5s linear;
			}
		}

		.dots_share {
			position: absolute;
			top: 0;
			right: 0;

			.dots_share_box {
				width: 132rpx;
				height: 64rpx;
				box-sizing: border-box;
				border: 2rpx solid #FFFFFF;
				border-radius: 200rpx 0 0 200rpx;
				background: rgba(255, 255, 255, 0.35);
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				font-size: 28rpx;
				color: #5C5E5E;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				.share {
					position: absolute;
					top: 0rpx;
					right: 0;
					width: 132rpx;
					height: 64rpx;
					opacity: 0;
				}
			}

		}

	}

	.home-swiper-box {
		width: 750rpx;
		height: 422rpx;

		.item-img-box {
			width: 750rpx;
			height: 422rpx;
		}
	}

	.historical_records {
		margin: 0 auto;
		padding: 0 0 24rpx 0;
		width: 686rpx;

		.historical_records_title {
			padding: 48rpx 0 24rpx 0;
			margin-bottom: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			line-height: 1;
			border-bottom: 1.9rpx solid #E4E6E6;

			.historical_records_title_text {
				font-size: 36rpx;
				color: #1B2120;
				font-weight: bold;
			}

			.historical_records_title_btn {
				font-size: 26rpx;
				color: #7C807F;
			}
		}

		.historical_records_list {

			display: flex;
			justify-content: space-between;

			.historical_records_course {
				width: 330rpx;

				.historical_records_course_img {
					margin-bottom: 32rpx;
					width: 330rpx;
					height: 186rpx;
					position: relative;
					overflow: hidden;
					border-radius: 24rpx;

					image {
						width: 330rpx;
						height: 186rpx;
						border-radius: 24rpx;

					}

					.historical_records_study_progress {
						position: absolute;
						bottom: 0rpx;
						left: 0rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						line-height: 1;
						background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
						width: 330rpx;
						height: 40rpx;
						box-sizing: border-box;
						padding: 0 16rpx;

						view {
							width: 80%;
							font-size: 20rpx;
							color: #fff;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							/* 限制显示的行数为2 */
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						image {
							width: 24rpx;
							height: 24rpx;
						}
					}
				}

				.historical_records_course_name {
					margin-bottom: 6rpx;
					font-size: 30rpx;
					color: #1B2120;
					line-height: 1.4;
					font-weight: bold;
				}

				.historical_records_study_time {
					font-size: 24rpx;
					color: #7C807F;
					line-height: 1;
				}
			}
		}
	}

	.course_classification {
		margin: 0 auto;
		padding-top: 48rpx;
		width: 686rpx;

		.course_tabs {
			position: sticky;
			top: 0;
			width: 686rpx;
			z-index: 9;
			background-color: #fff;

			.header_sub_nav_scroll {
				width: 100%;
				box-sizing: border-box;
				white-space: nowrap;
				//padding-right: 160rpx;

				.course_tabs_item_box {
					display: flex;

					.course_tabs_item {
						display: flex;
						flex-direction: column;
						align-items: center;
						line-height: 1;
						margin-right: 36rpx;

						.course_tabs_item_name {
							margin-bottom: 16rpx;
							font-size: 30rpx;
							color: #5C5E5E;
						}

						.course_tabs_item_name_act {
							font-size: 40rpx;
							color: #1B2120;
							font-weight: bold;
						}

						.course_tabs_item_tips {
							width: 32rpx;
							height: 8rpx;
							background-color: #FF6084;
							border-radius: 20rpx;
						}
					}
				}

			}


		}

		.course_content {

			.course_content_list {
				margin-top: 40rpx;
				padding-bottom: 40rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1.9rpx solid #E4E6E6;

				.course_content_img {
					position: relative;

					image {
						width: 284rpx;
						height: 160rpx;
						border-radius: 24rpx;
					}

					.course_content_tips {
						padding: 8rpx;
						background-color: #fff;
						border: 1px solid #FF6084;
						border-radius: 8rpx;
						font-size: 22rpx;
						color: #FF6084;
						position: absolute;
						top: 16rpx;
						left: 16rpx;
					}
				}

				.course_content_text {
					padding: 8rpx 0;
					width: 386rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.course_content_text_name {
						font-size: 30rpx;
						font-weight: bold;
						line-height: 1.4;

						display: -webkit-box;
						-webkit-line-clamp: 2;
						/* 限制显示的行数为2 */
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.course_content_text_tips {
						font-size: 26rpx;
						color: #7C807F;
						line-height: 1.4;
						word-break: break-word;
						word-break: break-all;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						/* 限制显示的行数为2 */
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}

			.course_content_list:last-child {
				border: none;
			}
		}
	}
</style>